<template>
  <div style="width: 100%;height: 100%;padding: 0 7px 3px 7px;">
    <dv-scroll-board :config="config"/>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        config: {
          rowNum: 5, //表格行数
          headerHeight: 30, //表头高度
          headerBGC: '', //表头
          oddRowBGC: '', //奇数行
          evenRowBGC: '#0E3971', //偶数行
          index: true, //显示行号
          columnWidth: [40, 80, 220], //列宽度
          align: ['center', 'center', 'center', 'center', 'center'] //列对齐方式
        },
        drawTiming: null
      }
    },
    components: {},
    props: {
      configCode: {
        type: String,
        default: ''
      },
      index: {
        type: Number,
        default: 0
      }
    },
    created() {
      this.drawTimingFn()
    },
    mounted() {

    },
    beforeDestroy() {
      clearInterval(this.drawTiming);
      this.drawTiming = null
    },
    watch: {},
    methods: {
      drawTimingFn () {
        this.queryData();
        this.drawTiming = setInterval(() => {
          this.queryData();
        }, 20000);
      },
      queryData() {
        this.$http.get("/visShow/queryData", {
          params: {
            configCode: this.configCode,
            index: this.index
          }
        }).then(res => {
          const {data} = res
          if (data.status == 200) {
            this.$set(this.config, "header", data.object.header)
            this.$set(this.config, "data", data.object.data)
          }
        })
      }
    }
  };
</script>

<style lang="scss" scoped>
  ::v-deep .dv-scroll-board .header {
    font-size: 14px;
  }
  ::v-deep .dv-scroll-board .rows .row-item {
    font-size: 12px;
  }
</style>
